<template>
	<view class="container">
		<view class="panel">
			<func-tab-bar></func-tab-bar>
		</view>
		<view class="switch">
			<view @click="clickSwitch" class="switch-button">
				<image class="switch-button-img" :src="`../../static/images/switch${isOpenFlash ? '-active' : ''}.png`"></image>
			</view>
			<camera v-if="isOpenFlash" id="camera-flash" :flash="isOpenFlash ? 'torch' : 'off'"></camera>
		</view>
	</view>
</template>

<script setup lang="ts">
import FuncTabBar from "@/components/FuncTabBar/FuncTabBar.vue";
import auth from "@/utils/auth";
import storage from "@/utils/storage";
import type { Setting } from "@/components/SettingPopup/SettingPopup.vue";
import { DefaultSetting } from "@/constant/constant";
import { ref } from 'vue';
import { computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";

onLoad(() => {
	// 获取设置
	const s = storage.getSync("setting", DefaultSetting);
	getApp().globalData!.setting = s;
})

const hasCameraAuth = ref(false);
const isOpenFlash = ref(false);

async function getCameraAuth() {
    // 检查是否已授权摄像头权限，若没授权，自动获取
    let result = await auth.openSetting("camera");
    // 保存摄像头权限状态
	hasCameraAuth.value = result; 
}

async function clickSwitch() {
    if (!isOpenFlash.value) {
		const check = await auth.check("camera");
		if (check) {
			isOpenFlash.value = !isOpenFlash.value;
			uni.vibrateShort({
				type: "medium"
			})
		} else {
			await getCameraAuth();
			isOpenFlash.value = false;
		}
    } else {
        isOpenFlash.value = false;
    }
}

</script>

<style lang="scss" scoped>
	.container {
		// background: #000;
		.panel {
			height: 80%;
			padding: 20rpx;
		}
		
		.switch {
			height: 20%;
			
			&-button {
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto;
			
				&-img {
					object-fit: contain;
					height: 100%;
					width: 100%;
				}
			}
			
			#camera-flash {
				height: 0;
			}
		}
	}
</style>
